<template>
	<div v-bind="$attrs" class="base-table">
		<div class="select-stle" v-if="showIndex == 0">
			<el-form>
				<el-form-item label="船名  " style="width: 38%">
					<el-select v-model="value" filterable placeholder="请选择船名" size="mini" clearable>
						<el-option v-for="item in shipNameSelect" :key="item.key" :label="item.value" :value="item.value"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="驳船名" style="width: 38%">
					<el-select v-model="value1" filterable placeholder="请选择驳船名" size="mini" clearable>
						<el-option v-for="item in BargeNameSelect" :key="item.key" :label="item.value" :value="item.value"></el-option>
					</el-select>
				</el-form-item>
				<el-button class="search_btn" type="primary" icon="el-icon-search" size="mini" @click="showBusinessReceive()">
					查询
				</el-button>
			</el-form>
		</div>
		<slot name="title" />
		<slot />
		<el-table
			id="table"
			:header-cell-style="headColor ? headStyle : {}"
			@cell-mouse-enter="enter"
			:show-summary="ShowSummary.show"
			border
			:summary-method="getSummariesOut || getSummaries"
			:sum-text="ShowSummary.sumText"
			:height="newTableHeight"
			:max-height="maxTableHeight"
			:data="tableData"
			:stripe="stripe"
			:ref="$attrs.ref || ref"
			v-bind="tableAttrs"
			style="width: 100%"
			@row-click="tableDetails"
			@row-dblclick="tableDetailsdb"
			:row-class-name="tableRowClassNameOut || tableRowClassName"
			v-loading="loading"
			element-loading-text="网络开小差，正在努力加载..."
			element-loading-spinner="el-icon-loading"
			@mousedown.native="mousedown"
			@mouseup.native="mouseUp"
			@mouseleave.native="mouseLeave"
			@expand-change="expandChange"
			@header-dragend="headerWidthChange"
			@selection-change="handleSelectionChange"
			@select-all="onSelectAll"
			@select="onSelect"
			:row-key="rowKey"
			:span-method="arraySpanMethod || tableRowSpan"
		>
			<!-- <el-table-column type="selection" width="55"/> -->
			<template v-for="(col, index) in columnAttrs">
				<el-table-column v-if="col.child" v-bind="col" show-overflow-tooltip align="center" :key="index">
					<template v-for="(colB, indexB) in col.child">
						<el-table-column v-if="!colB.render" v-bind="colB" :key="indexB" show-overflow-tooltip></el-table-column>
						<el-table-column v-else v-bind="colB" :key="indexB" show-overflow-tooltip>
							<template slot-scope="scope">
								<expandDom :row="scope.row" :col="colB" :render="colB.render" :col-index="indexB" />
							</template>
						</el-table-column>
					</template>
				</el-table-column>
				<el-table-column
					v-else-if="!col.render && col.type == 'selection'"
					v-bind="col"
					:key="index"
					width="55"
					type="selection"
					:selectable="selectable"
				/>
				<!-- 树形数据使用 -->
				<el-table-column
					v-else-if="!col.render && (htmlName === 'treeProps' || htmlName === 'bargePort')"
					:align="col.align && col.align != undefined ? col.align : 'left'"
					:fixed="col.fixed && col.fixed != undefined ? col.fixed : false"
					:width="col.width"
					:key="index"
					show-overflow-tooltip
				>
					<template slot="header" slot-scope="scope">
						<el-tooltip class="item" effect="light" :content="col.label" placement="top">
							<span class="tableHeadStyle">{{ col.label }}</span>
						</el-tooltip>
					</template>
					<template slot-scope="scope">
						<div v-if="col.progress" style="padding-right: 50px">
							<el-progress
								height="15"
								class="tableProgress"
								:text-inside="false"
								:stroke-width="14"
								:percentage="Number(Number(scope.row[col.prop]).toFixed(2))"
								color="#4FD412"
							></el-progress>
						</div>
						<span v-else-if="htmlName === 'treeProps' || htmlName === 'bargePort'">
							{{ scope.row[col.prop] }}
						</span>
						<div v-else>
							{{ scope.row[col.prop] }}
						</div>
					</template>
				</el-table-column>

				<el-table-column v-else-if="!col.render" v-bind="col" :key="index" show-overflow-tooltip>
					<template slot="header" slot-scope="scope">
						<el-tooltip class="item" effect="light" :content="col.label" placement="top">
							<span class="tableHeadStyle">{{ col.label }}</span>
						</el-tooltip>
					</template>
					<template slot-scope="scope">
						<div v-if="col.progress" style="padding-right: 50px">
							<el-progress
								height="15"
								class="tableProgress"
								:text-inside="false"
								:stroke-width="14"
								:percentage="Number(Number(scope.row[col.prop]).toFixed(2))"
								color="#4FD412"
							></el-progress>
						</div>
						<div v-else-if="col.datetime">
							<el-date-picker
								v-model="scope.row[col.prop]"
								type="datetime"
								size="mini"
								value-format="yyyy-MM-dd HH:mm:ss"
								placeholder=""
								style="width: 175px"
								@change="timeChange($event, scope.row[col.prop])"
							></el-date-picker>
						</div>
						<div v-else-if="col.remark">
							<el-input v-model="scope.row[col.prop]" size="mini" placeholder="" style="width: 175px"></el-input>
						</div>
						<!-- <div v-else style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis">
							{{ scope.row[col.prop] }}
						</div> -->
						<div v-else>
							{{ scope.row[col.prop] }}
						</div>
					</template>
				</el-table-column>
				<!-- <el-table-column v-else v-bind="col" v-for="(col, index) in columnAttrs" :key="index">render渲染重复数据 -->
				<!-- 树形数据使用 -->
				<el-table-column
					v-else-if="col.render && (htmlName === 'treeProps' || htmlName === 'bargePort')"
					:align="col.align && col.align != undefined ? col.align : 'left'"
					:fixed="col.fixed && col.fixed != undefined ? col.fixed : false"
					:width="col.width"
					:key="index"
					show-overflow-tooltip
				>
					<template slot="header" slot-scope="scope">
						<el-tooltip class="item" effect="light" :content="col.label" placement="top">
							<span class="tableHeadStyle">{{ col.label }}</span>
						</el-tooltip>
					</template>
					<template slot-scope="scope">
						<span class="treeProps">
							<expandDom :row="scope.row" :col="col" :render="col.render" :col-index="index" />
						</span>
					</template>
				</el-table-column>

				<el-table-column
					v-else
					v-bind="col"
					:key="index"
					:show-overflow-tooltip="
						(htmlName == '商务指令' && (col.prop == 'downVoyages' || col.prop == 'upVoyages')) ||
						(htmlName == 'workLineBaseTable' && (col.label == '操作源' || col.label == '目的地')) ||
						(htmlName == 'dischargeInformation' && (col.label == '装货运输工具' || col.label == '卸货运输工具')) ||
						(htmlName == '指令核销' && (col.prop == 'downVoyages' || col.prop == 'upVoyages' || col.prop == 'bargeName')) ||
						(htmlName == '费用结算外部' && (col.prop == 'loadTraffic' || col.prop == 'loadingTraffic'))
							? false
							: true
					"
				>
					<template slot="header" slot-scope="scope">
						<el-tooltip class="item" effect="light" :content="col.label" placement="top">
							<span class="tableHeadStyle">{{ col.label }}</span>
						</el-tooltip>
					</template>
					<template slot-scope="scope">
						<expandDom :row="scope.row" :col="col" :render="col.render" :col-index="index" />
					</template>
				</el-table-column>
			</template>

			<template v-for="(col, index) in columnAttrs" v-if="false">
				<el-table-column v-if="col.child" v-bind="col" show-overflow-tooltip align="center" :key="index">
					<template v-for="(colB, indexB) in col.child">
						<el-table-column v-if="!colB.render" v-bind="colB" :key="indexB" show-overflow-tooltip></el-table-column>
						<el-table-column v-else v-bind="colB" :key="indexB" show-overflow-tooltip>
							<template slot-scope="scope">
								<expandDom :row="scope.row" :col="colB" :render="colB.render" :col-index="indexB" />
							</template>
						</el-table-column>
					</template>
				</el-table-column>
				<el-table-column v-else-if="!col.render" v-bind="col" :key="index" show-overflow-tooltip>
					<template slot-scope="scope">
						<div v-if="col.progress" style="padding-right: 50px">
							<el-progress
								height="15"
								class="tableProgress"
								:text-inside="false"
								:stroke-width="14"
								:percentage="Number(Number(scope.row[col.prop]).toFixed(2))"
								color="#4FD412"
							></el-progress>
						</div>
						<div v-else-if="col.datetime">
							<el-date-picker
								v-model="scope.row[col.prop]"
								type="datetime"
								size="mini"
								value-format="yyyy-MM-dd HH:mm:ss"
								placeholder=""
								style="width: 175px"
								@change="timeChange($event, scope.row[col.prop])"
							></el-date-picker>
						</div>
						<div v-else-if="col.remark">
							<el-input v-model="scope.row[col.prop]" size="mini" placeholder="" style="width: 175px"></el-input>
						</div>
						<div v-else style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis">
							{{ scope.row[col.prop] }}
						</div>
					</template>
				</el-table-column>
				<!-- <el-table-column v-else v-bind="col" v-for="(col, index) in columnAttrs" :key="index">render渲染重复数据 -->
				<el-table-column v-else v-bind="col" :key="index" show-overflow-tooltip>
					<template slot-scope="scope">
						<expandDom :row="scope.row" :col="col" :render="col.render" :col-index="index" />
					</template>
				</el-table-column>
			</template>
		</el-table>
		<!-- 		<el-pagination v-if="paginationAttrs.isPagination" v-bind="paginationAttrs" class="pagination-container" @size-change="handleSizeChange"
		 @current-change="handleCurrentChange" /> -->
		<!-- <el-pagination v-bind="paginationAttrs" class="pagination-container" @size-change="handleSizeChange" @current-change="handleCurrentChange" /> -->
		<div class="page" v-if="paginationAttrs.isPagination">
			<span v-show="showflag">总件数：{{ allSumNum }} &nbsp;&nbsp;&nbsp;&nbsp;总吨数：{{ allSumWeight }}</span>
			<el-pagination
				background
				layout="total, sizes, prev, pager, next, jumper"
				:total="paginationAttrs.totalNum"
				:current-page="paginationAttrs.startpage"
				:page-size="paginationAttrs.pagesize"
				class="pagination-container"
				:page-sizes="[10, 15, 30, 50]"
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
			></el-pagination>
		</div>
	</div>
</template>
<script>
import { defaultTableAttrs, defaultColumn, defaultPagination } from "./tableConfig"
export default {
	name: "BaseTable",
	components: {
		expandDom: {
			functional: true,
			props: {
				row: Object,
				col: Object,
				render: Function,
				colIndex: [Number, String],
			},
			render(h, ctx) {
				const randomIndex = Math.random().toString(35).replace(".", "")
				const params = {
					row: {
						...ctx.props.row,
					},
					colIndex: ctx.props.colIndex || randomIndex,
				}
				if (ctx.props.col) {
					params.col = ctx.props.col
				}
				// return ctx.props.render && ctx.props.render(h, params)
			},
		},
	},
	props: {
		// row-class-name函数
		tableRowClassNameOut: {
			type: Function,
		},
		//合计函数
		getSummariesOut: {
			type: Function,
		},
		Propsref: {
			type: String,
			default: "table",
		},
		headColor: {
			// type: Boolean,
			type: [Boolean, String],
		},
		extraData: {
			type: String | Number,
		},
		showflag: {
			type: Boolean,
			default: false,
		},
		allSumNum: {
			type: String | Number,
		},
		allSumWeight: {
			type: String | Number,
		},
		showIndex: {
			type: String,
			default: "1",
		},
		//船名
		shipNameSelect: {
			type: Array,
		},
		//驳船名
		BargeNameSelect: {
			type: Array,
		},
		loading: {
			type: Boolean,
			default: false,
		},
		ShowSummary: {
			type: Object,
			default() {
				return {
					show: false,
					sumText: "合计",
					method: null,
				}
			},
		},
		summaryData: {
			type: Object,
		},
		data: {
			type: Array,
			default() {
				return []
			},
		},
		columns: {
			type: Array,
			default() {
				return []
			},
		},
		htmlName: {
			type: String,
			default: "",
		},
		tableHeight: {
			type: [Number, String],
			// default:window.innerHeight - 210
		},
		maxTableHeight: {
			type: [Number, String],
			// default:window.innerHeight - 210
		},
		pagination: {
			type: [Object, Boolean],
			default() {
				return Object
			},
		},
		// 合计单元格合并判断字段
		dataType: {
			type: Number,
		},
		// 是否需要展开树形数据
		rowKey: {
			type: [String, Function],
			default: "",
		},
		sessionExpand: {
			// 当前展开项操作的数据
			type: Object,
			default() {
				return {}
			},
		},
		// 是否展示斑马纹 默认展示
		stripe: {
			type: Boolean,
			default: true,
		},
		// arraySpanMethod
		arraySpanMethod: {
			type: Function,
		},
		// 用户手动勾选数据行的 Checkbox 时触发的事件
		onSelectChange: {
			type: Function,
		},
		isSelectAll: {
			type: Boolean,
			default: true,
		},
		selectType: {
			type: String,
		},
	},
	data() {
		return {
			ref: "",
			table: null, //table的元素
			scrollLeft: 0, //记录拉动位置
			isDrag: false, //是否为拖动状态
			theight: "",
			// options: [{
			//     value: '选项1',
			//     label: '黄金糕'
			//     }, {
			//     value: '选项2',
			//     label: '双皮奶'
			//     }, {
			//     value: '选项3',
			//     label: '蚵仔煎'
			//     }, {
			//     value: '选项4',
			//     label: '龙须面'
			//     }, {
			//     value: '选项5',
			//     label: '北京烤鸭'
			// }],
			value: "",
			value1: "",
			// tableHeight: window.innerHeight - 210,
			tableAttrs: {},
			columnAttrs: [],
			paginationAttrs: {
				totalNum: 0,
				startpage: 0,
				pagesize: 0,
			},
			heightChange: 0,
			tableSummaryData: this.summaryData,
			tableData: this.data,
			// newTableHeight: this.tableHeight
			multipleSelection: [], // 选中的值
		}
	},
	computed: {
		newTableHeight() {
			// alert(this.tableHeight)
			if (this.tableHeight) {
				return this.tableHeight + this.heightChange
			} else {
				return "100%"
			}
		},
	},
	watch: {
		pagination: {
			handler(val) {
				this.getPagination()
			},
			deep: true,
		},
		summaryData: {
			handler(val) {
				this.tableSummaryData = val
				console.log(this.tableSummaryData, "this.tableSummaryData")
			},
			deep: true,
		},
		data: {
			immediate: true,
			async handler(value) {
				this.tableData = value
				this.$nextTick(() => {
					if (this.dataType == 1) {
						const tds = document.querySelectorAll(".el-table .el-table__footer-wrapper tr>td")
						if (tds.length !== 0) {
							tds[0].colSpan = 7
						}
					}
					if (this.htmlName == "workLineBaseTable") {
						if (Object.keys(this.sessionExpand).length != 0) {
							if (value.length != 0) {
								value.map((item, index) => {
									if (item.id == this.sessionExpand.id) {
										this.$refs[this.ref].toggleRowExpansion(item, true)
									}
								})
							}
						}
					}
				})
			},
		},
		columns: {
			deep: true,
			async handler(value) {
				this.columnAttrs = value.map(column => {
					const obj = Object.assign({}, defaultColumn, column)
					return obj
				})
			},
		},
	},
	created() {
		console.log(this.tableHeight)
		this.$nextTick(() => {
			this.init()
			// const tds = document.querySelectorAll('.el-table .el-table__footer-wrapper tr>td');
			// tds[0].colSpan=2;
		})
	},
	mounted() {
		this.ref = this.Propsref
		//监听滚动条
		this.$nextTick(() => {
			this.table = this.$refs[this.ref].$el
			let tableScroll = this.table.childNodes[2]
			tableScroll.addEventListener("scroll", this.tableScroll, true)
		})
	},
	updated() {
		this.$nextTick(() => {
			this.$refs[this.ref].doLayout()
		})
	},
	methods: {
		/**
		 * @Author: zhangyongbing
		 * @description: 仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选
		 * @param {*}
		 * @return {*}
		 */
		selectable(row, index) {
			if (row.disabled) {
				return false
			} else {
				return true
			}
		},
		tableRowSpan() {},
		headStyle({ row, column, rowIndex, columnIndex }) {
			if (this.headColor) {
				if (this.headColor == "workLineModChild") {
					return { background: "rgb(208 223 246)" }
					// }else if(this.headColor == 'workplan'){
					//     if(columnIndex==28 || columnIndex==29 || columnIndex==30 || columnIndex==31){
					//         return {background:'#d0dff6'}
					//     }
				} else {
					return { background: "white" }
				}
			}
		},
		timeChange(e, time) {
			console.log("time", e, time)
		},
		//监听滚动条
		tableScroll(e) {
			this.scrollLeft = -this.table.childNodes[2].scrollLeft
			if (window.getSelection().toString()) {
				this.table.onmousemove = null
			}
		},
		//鼠标按下
		mousedown(e) {
			if (e.button != 0 || e.path[3].tagName == "THEAD") return //如果是按下鼠标右键或者是表头就不进行操作
			let tableScroll = this.table.childNodes[2] //表格滚动条所在元素
			// let tableWidth =  Number(this.$refs[this.ref].bodyWidth.split('p')[0]) //表格总宽度
			// let curretnWidth = this.table.offsetWidth//当前表格可示宽度
			let disX = e.clientX - this.scrollLeft
			this.isDrag = true
			this.table.onmousemove = el => {
				if (this.isDrag) {
					//window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
					let moveX = el.clientX - disX //位移
					if (moveX >= 0) {
						//右侧到顶
						moveX = 0
					}
					// else if(curretnWidth - moveX >= tableWidth){ //左侧到顶
					// 	moveX = curretnWidth - tableWidth
					// }
					this.$nextTick(() => {
						tableScroll ? (tableScroll.scrollLeft = -moveX) : ""
					})
				}
			}
		},
		//鼠标抬起
		mouseUp(e) {
			this.table.onmousemove = null
			this.isDrag = false
		},
		//鼠标离开
		mouseLeave() {
			this.table.onmousemove = null
			this.isDrag = false
		},
		enter(row, column, cell, event) {},
		getSummaries(param) {
			const { columns, data } = param
			const sums = []
			console.log(data)
			let value0 = [],
				value1 = [],
				value2 = []
			data.map(item => {
				if (item.ticketType == "01") {
					value0.push(item)
				}
				if (item.ticketType == "02") {
					value1.push(item)
				}
				value2.push(item.taxAmount == undefined ? 0 : item.taxAmount)
			})
			const sumValue = (...arr) => [].concat(...arr).reduce((acc, val) => Number(acc) + Number(val), 0)
			// var sumValue = numbers.reduce(function(sum,number){ //sum2 前两个数的和
			// 	console.log(sum) //1000 1003 1008
			// 	return sum + number;
			// },1000)
			window.setTimeout(() => {
				if (this.newTableHeight === this.tableHeight) {
					this.heightChange -= 0.5
				} else {
					// this.newTableHeight = this.tableHeight
					this.heightChange += 0.5
				}
			}, 500)
			columns.forEach((column, index) => {
				if (index === 0) {
					sums[index] = "合计"
					return
				}
				if (column.property == "bczxdw") {
					sums[index] = this.extraData
				}
				if (this.dataType != 1) {
					if (
						column.property == "sumWeight" ||
						column.property == "weightAvg" ||
						column.property == "pcs" ||
						column.property == "sumNum" ||
						column.property == "realWeight" ||
						column.property == "realNum"
					) {
						const values = data.map(item => Number(item[column.property]))
						if (!values.every(value => isNaN(value))) {
							sums[index] = values.reduce((prev, curr) => {
								const value = Number(curr)
								if (!isNaN(value)) {
									return prev + curr
								} else {
									return prev
								}
							}, 0)
							sums[index] = sums[index].toFixed(2)
						} else {
							sums[index] = ""
						}
					}
				}
				if (
					column.property == "num" ||
					column.property == "weight" ||
					column.property == "realNum" ||
					column.property == "realWeight"
				) {
					const values = data.map(item => Number(item[column.property]))
					if (this.dataType == 1) {
						if (!values.every(value => isNaN(value))) {
							sums[index] = values.reduce((prev, curr) => {
								const value = Number(curr)
								if (!isNaN(value)) {
									return prev + curr
								} else {
									return prev
								}
							}, 0)
							if (index == 12 || index == 13 || index == 14 || index == 15) {
								sums[0] = ""
								let htmllet = ""
								// sums[12] = (sums[12] == undefined || sums[12] == '') ? 0 : sums[12]
								// sums[13] = (sums[13] == undefined || sums[13] == '') ? 0 : sums[13]
								// sums[14] = (sums[14] == undefined || sums[14] == '') ? 0 : sums[14]
								// sums[15] = (sums[15] == undefined || sums[15] == '') ? 0 : sums[15]
								htmllet += '<span class="sumClassTotal">合计:</span>'
								htmllet +=
									'<span class="sumClass">计划件数:<span class="sumNum">' + this.tableSummaryData.num + "</span></span>"
								htmllet +=
									'<span class="sumClass">计划重量:<span class="sumNum">' +
									this.tableSummaryData.weight +
									"</span></span>"
								const tds = document.querySelectorAll(".el-table .el-table__footer-wrapper tr>td")
								tds[0].innerHTML = htmllet
								console.log(htmllet)
								sums[12] = ""
								sums[13] = ""
								sums[14] = ""
								sums[15] = ""
							}
							sums[index] = ""
						} else {
							sums[index] = ""
						}
					}
				}
				if (this.dataType != 1) {
					if (
						column.property == "num" ||
						column.property == "weight" ||
						column.property == "pcs" ||
						column.property == "nw" ||
						column.property == "gw"
					) {
						const values = data.map(item => Number(item[column.property]))
						if (!values.every(value => isNaN(value))) {
							sums[index] = values.reduce((prev, curr) => {
								const value = Number(curr)
								if (!isNaN(value)) {
									return prev + curr
								} else {
									return prev
								}
							}, 0)
							sums[index] = sums[index].toFixed(3)
							// if(index == 3){
							// 	sums[index] = sums[index].toFixed(3);
							// }
							// if (index == 4) {
							// 	sums[index] = sums[index].toFixed(3);
							// }
						} else {
							sums[index] = ""
						}
					}
				}
				if (
					column.property == "sfkp" ||
					column.property == "delFlag" ||
					column.property == "fkdwName" ||
					column.property == "amount" ||
					column.property == "taxAmount"
				) {
					const values = data.map(item => Number(item[column.property]))
					if (!values.every(value => isNaN(value))) {
						sums[index] = values.reduce((prev, curr) => {
							const value = Number(curr)
							if (!isNaN(value)) {
								return prev + curr
							} else {
								return prev
							}
						}, 0)
						if (index == 7) {
							sums[0] = ""
							let htmllet = ""
							htmllet += '<span class="sumClassTotal">合计:</span>'
							htmllet +=
								'<span class="sumClass">金额:<span class="sumNum">' + this.tableSummaryData.receiptAmount + "</span></span>"
							htmllet +=
								'<span class="sumClass">税额:<span class="sumNum">' +
								this.tableSummaryData.receiptTaxAmount +
								"</span></span>"
							htmllet +=
								'<span class="sumClass">价税合计:<span class="sumNum">' +
								this.tableSummaryData.receiptLeviedTotal +
								"</span></span>"
							htmllet += '<span class="sumClass">普票:<span class="sumNum">' + this.tableSummaryData.pSize + "</span></span>"
							htmllet += '<span class="sumClass">专票:<span class="sumNum">' + this.tableSummaryData.zSize + "</span></span>"
							const tds = document.querySelectorAll(".el-table .el-table__footer-wrapper tr>td")
							this.$nextTick(() => {
								tds[0].colSpan = 9
							})
							tds[0].innerHTML = htmllet
						}
						sums[index] = ""
						// sums[1] = content
					} else {
						sums[index] = ""
					}
				}
			})
			return sums
		},
		//下拉框
		showBusinessReceive() {
			if (this.value == "" && this.value1 == "") {
				this.$http.get(`/${this.$ServiceName}/api/external/shipbargeinfo/${this.$version}/listtrust`).then(res => {
					if (res.data.code != "0000") {
						return this.$message.error(res.data.msg)
					}
					this.data = res.data.data
				})
			} else if (this.value == "" && this.value1 != "") {
				this.$http
					.get(`/${this.$ServiceName}/api/external/shipbargeinfo/${this.$version}/listtrust?BargeName=${this.value1}`)
					.then(res => {
						if (res.data.code != "0000") {
							return this.$message.error(res.data.msg)
						}
						this.data = res.data.data
					})
			} else {
				this.$http
					.get(
						`/${this.$ServiceName}/api/external/shipbargeinfo/${this.$version}/listtrust?shipNameVoyage=${this.value}&BargeName=${this.value1}`
					)
					.then(res => {
						if (res.data.code != "0000") {
							return this.$message.error(res.data.msg)
						}
						this.data = res.data.data
					})
			}
		},
		init() {
			// 获取element table上的属性
			const tableAttrs = {}
			Object.keys(defaultTableAttrs).forEach(key => {
				if (this.$attrs[key] !== undefined) {
					tableAttrs[key] = this.$attrs[key]
				}
			})
			this.tableAttrs = Object.assign({}, defaultTableAttrs, tableAttrs)

			// 获取element table col上的属性
			this.columnAttrs = this.columns.map(column => {
				const obj = Object.assign({}, defaultColumn, column)
				return obj
			})

			this.getPagination()
		},
		getPagination() {
			// 获取element 分页属性
			const pagination = this.pagination
			let paginationAttrs = {}
			if (pagination) {
				if (typeof pagination === "object") {
					paginationAttrs = {
						...defaultPagination,
						...pagination,
						isPagination: true,
					}
				} else {
					paginationAttrs = {
						...defaultPagination,
						isPagination: false,
					}
				}
			}
			Object.keys(paginationAttrs).forEach(key => {
				if (this.$attrs[key] !== undefined && key !== "pagination") {
					paginationAttrs[key] = this.$attrs[key]
				}
			})
			this.paginationAttrs = paginationAttrs
		},
		handleSizeChange(pageSize) {
			this.$emit("size-change", pageSize)
		},
		handleCurrentChange(page) {
			this.$emit("current-change", page)
		},
		tableRowClassName({ row, rowIndex }) {
			row.index = rowIndex
			if (this.htmlName == "商务指令") {
				// if (rowIndex === this.data.length -1) {
				// 	return 'warning-row';
				// }
				if (row.tfh == "01" || row.tfh == "02") {
					return "tfh-row"
				}
				return ""
			}
			if (this.htmlName == "轮驳计划桌面") {
				if (row.isSolo == "1") {
					return "desk_red"
				}

				if (row.planStatus == "01") {
					return "desk_warning"
				} else if (row.planStatus == "04" || row.planStatus == "09" || row.planStatus == "10" || row.planStatus == "11") {
					return "desk_success"
				}
				if (row.isSolo == "0") {
					return "desk_white"
				}
				return ""
			}
			//船舶调度页面中公司code未6位时
			if (this.htmlName == "shipDispatch") {
				if (row.companyCode && row.companyCode.length == 6) {
					return "success-row"
				}
				if (row.creditFlag && row.creditFlag == "true") {
					return "black-row"
				}
			}
			//船舶调度页面中公司code未6位时
			if (this.htmlName == "mainTicket") {
				if (row.colorType == "add") {
					return "add-row"
				} else {
					return ""
				}
			}
			//船舶调度新页面 未审核数据 黄色  已审核无色
			// flag 0未审核，1审核通过，9驳回
			// tonType == 1  底色显示浅红色  优先级最高
			if (this.htmlName == "shipDispatchNew") {
				if (row.creditFlag && row.creditFlag == "true") {
					return "black-row"
				}
				if (row.tonType != "1") {
					// if(row.companyCode && row.companyCode.length ==6){
					// 	if(row.flag == "0"){
					// 		return 'ship_yellow';
					// 	}else if(row.flag == '9'){
					// 		return 'ship_red';
					// 	}else {
					// 		return 'success-row';
					// 	}
					// // }else if(row.flag == "0"){
					// // 	return 'ship_yellow';
					// // }else if(row.flag == '9'){
					// // 	return 'ship_red';
					// }else {
					// 	return 'ship_write';
					// }
				} else {
					return "ship_lightRed"
				}
			}
			// 大机钢丝管理
			if (this.htmlName == "大机钢丝管理") {
				// return row.color;
				if (row.color == "#FFE0E0") {
					return "big_red"
				} else if (row.color == "#FFFBF0") {
					return "big_yellow"
				} else {
					return ""
				}
			}
			if (this.htmlName == "workTaskEditNewTable") {
				// 新增 工班计划 展示 哪些作业票已开工

				if (row.status != "101" && row.status != undefined && row.status != "") {
					return "bg-blue"
				} else if (row.auditStatus == "101") {
					return ""
				} else if (row.auditStatus == "201") {
					return "bg-orange"
				} else if (row.auditStatus == "301") {
					return "bg-green"
				} else if (row.auditStatus == "401") {
					return "bg-red"
				} else {
					return ""
				}
			}

			if (this.htmlName == "发票管理") {
				if (row.hcbz == "1") {
					return "hcbz_red"
				}
			}
			// 驳船报港
			if (this.htmlName == "bargePort") {
				if (row.children !== undefined) {
					if (row.children.length == 0) {
						// console.log(row,rowIndex)
						if (row.isColor == "1") {
							return "yellow-row"
						} else if (row.isColor == "2") {
							return "red-row"
						}
					}
				}
				if (row.isColor == "1") {
					return "yellow-row"
				} else if (row.isColor == "2") {
					return "red-row"
				}
			}
			row.index = rowIndex
			if (this.htmlName === "港存动态") {
				if (Number(row.sumWeight) === 0) {
					return "gcdt_eq_zero"
				}
				if (Number(row.sumWeight) < 0) {
					return "gcdt_lq_zero"
				}
				return ""
			}
		},
		tableDetails(row, event, column) {
			//单击事件
			var index = row.index
			this.$emit("details", row)
		},
		tableDetailsdb(row, event, column) {
			//双击事件
			var index = row.index
			this.$emit("detailsdb", row)
		},
		expandChange(row, expand) {
			//表格展开项事件
			this.$emit("expandChange", row, expand)
		},
		headerWidthChange() {
			//表头宽度调整后监听变化
			this.$nextTick(() => {
				this.$refs[this.ref].doLayout()
			})
		},
		//checkbox选择时id   单选
		handleSelectionChange(val) {
			this.multipleSelection = val
			this.$emit("checkId", val)
		},
		/**
		 * @Author: gonghairun
		 * @description: 全选
		 * @param {*}
		 * @return {*}
		 */
		onSelectAll() {
			if (this.isSelectAll === false) {
				this.$refs[this.ref].clearSelection() //这个是清除所有选择项，当选择全部时，清除所有选择项
			}
		},
		//清空选中向
		clearSelection() {
			this.$refs[this.ref].clearSelection()
		},
		/**
		 * @Author: zhangyongbing
		 * @description: 表格 多选 当用户手动勾选数据行的 Checkbox 时触发的事件
		 * @return {*}
		 */
		onSelect(selection, row) {
			let selected = selection.length && selection.indexOf(row) !== -1 // true就是选中，0或者false是取消选中
			if (this.selectType == "tally" && selected) {
				this.tableData.map(item => {
					if (item.operTicketNum == row.operTicketNum) {
						this.$refs[this.ref].toggleRowSelection(item, true)
					} else {
						this.$set(item, "disabled", true)
					}
				})
			} else if (this.selectType == "tally" && !selected) {
				this.$refs[this.ref].clearSelection()
				this.tableData.map(item => {
					this.$set(item, "disabled", false)
				})
			}
			this.onSelectChange(selection, row)
		},
	},
	destroyed() {
		let tableScroll = this.table.childNodes[2]
		tableScroll.removeEventListener("scroll", this.tableScroll)
	},
}
</script>
<style lang="less" scoped>
@import "../../assets/table";
// #table{
// 	-moz-user-select:none;
// 	-webkit-user-select:none;
// 	user-select:none;
// }
/deep/ .el-table tr td {
	border-left: none;
	border-right: none;
}
/deep/ .el-table--border th {
	border-right: none;
	// border-bottom:none !important;
}
.select-stle {
	margin-bottom: 20px;
	padding-left: 20px;
	.el-form {
		display: flex;
		align-items: center;
		.el-button {
			height: 32px;
		}
	}
}
/deep/.sumNum {
	color: #fa751b;
	font-weight: bold;
}
/deep/.sumClassTotal {
	margin: 0 10px;
}
/deep/.sumClass {
	margin-right: 10px;
}
</style>
<style lang="less">
.el-table .tfh-row {
	background: rgba(255, 0, 0, 0.2) !important;
}
.el-table .tfh-row td {
	background: none !important;
}
.base-table .el-table--striped .el-table__body tr.warning-row td {
	background: oldlace !important;
	color: #fa751b;
	font-size: 15px;
	.el-tag--mini {
		display: none;
	}
}
.warning-row td:first-child .el-tooltip {
	font-weight: 600;
	font-size: 15px;
}
.el-table .success-row {
	background: #f0f9eb !important;
}
.el-table .black-row {
	background: rgba(254, 167, 169, 0.7) !important;
}
.el-table .black-row td {
	background: none !important;
}
.el-table .add-row {
	color: #409eff !important;
}
.el-table .success-row td {
	background: #f0f9eb !important;
}
.tableProgress {
	.el-progress-bar__outer,
	.el-progress-bar__inner {
		border-radius: 0 !important;
	}
}
.el-table .desk_warning td {
	background-color: rgb(255, 251, 240) !important;
}
.el-table .desk_success td {
	background-color: rgb(240, 249, 235) !important;
}
.el-table .desk_red td {
	background-color: #ffe0e0 !important;
}
.el-table .desk_white td {
	background-color: #fff !important;
}
.el-table .big_red td {
	background-color: #ffe0e0 !important;
}
.el-table .big_yellow td {
	background-color: #fffbf0 !important;
}
.el-table .hcbz_red td {
	background-color: #ffe0e0 !important;
}
.el-table .ship_yellow td {
	background-color: #fffbf0 !important;
}
.el-table .ship_write td {
	background-color: #fff !important;
}
.el-table .ship_red td {
	background-color: #ffe0e0 !important;
}
.el-table .ship_lightRed td {
	background-color: #ffe0e0 !important;
}

.el-table .bg-orange td {
	background: #f7e8b0 !important;
}
.el-table .bg-blue td {
	background: #eafcff !important;
}
.el-table .bg-green {
	background: #f0f9eb !important;
}
.el-table .bg-red {
	background: #fbeded !important;
}
.el-table .yellow-row td:first-child .el-tooltip {
	color: #efae12;
}
.el-table .red-row td:first-child .el-tooltip {
	color: #fa6400;
}
.tableHeadStyle {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.el-table .gcdt_eq_zero {
	background-color: #ffe0e0 !important;
}
.el-table .gcdt_eq_zero td {
	background: none !important;
}

.el-table .gcdt_lq_zero {
	background-color: #eaf0ff !important;
}
.el-table .gcdt_lq_zero td {
	background: none !important;
}
</style>
